<template>
  <div class="content">
    <van-nav-bar
      left-text="ele.me"
      right-text="登录/注册"
      @click-left="refreshFn"
      @click-right="$router.push('/login')"
    >
    </van-nav-bar>
    <div class="locaCity">
      <van-cell title="当前定位城市：" value="定位不准时，请在城市列表中选择" />
      <!-- <span>当前定位城市：</span>
      <div>定位不准时，请在城市列表中选择</div> -->
      <div class="city">
        <van-cell
          :title="locaCity.name"
          is-link
          @click="toDetails(locaCity.id)"
        />
      </div>
    </div>
    <div class="hotCity">
      <div class="hot-title">热门城市</div>
      <van-grid>
        <van-grid-item
          :text="item.name"
          v-for="item in hotCity"
          :key="item.id"
          @click="toDetails(item.id)"
        />
      </van-grid>
    </div>
    <div class="all-city" v-for="(item, index) in allCity" :key="index">
      <div class="all-title">{{ index }}<span>（按字母顺序）</span></div>
      <van-grid>
        <van-grid-item
          :text="aitem.name"
          v-for="aitem in item"
          :key="aitem.id"
          @click="toDetails(aitem.id)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { citylist } from "@/api/citylist.js";
export default {
  data() {
    return {
      hotCity: [], // 热门城市
      allCity: {}, // 所有城市
      locaCity: {}, // 定位城市
    };
  },
  created() {
    this.getShowCity();
  },
  methods: {
    getShowCity() {
      // 热门城市
      citylist({ type: "hot" }).then((res) => {
        console.log(res);
        this.hotCity = res.data;
      });
      // 所有城市
      citylist({ type: "group" }).then((res) => {
        /* console.log(res);
      this.allCity = res.data;
      console.log(this.allCity); */
        let arys = res.data;
        //排序的函数
        function objKeySort(arys) {
          //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
          var newkey = Object.keys(arys).sort();
          //console.log('newkey='+newkey);
          var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
          for (var i = 0; i < newkey.length; i++) {
            //遍历newkey数组
            newObj[newkey[i]] = arys[newkey[i]];
            //向新创建的对象中按照排好的顺序依次增加键值对
          }
          return newObj; //返回排好序的新对象
        }
        let group = JSON.stringify(objKeySort(arys));
        this.allCity = JSON.parse(group);
      });
      // 定位城市
      citylist({ type: "guess" }).then((res) => {
        console.log(res);
        this.locaCity = res.data;
      });
    },
    // 跳转到详情地址
    toDetails(id) {
      this.$router.push({
        path: "/details",
        query: { id },
      });
    },
    refreshFn() {
      location.reload();
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  background-color: #f5f5f5;
}
/deep/.van-nav-bar {
  background-color: #3190e8;
  border-bottom: 1px solid #d4d3d3;
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
}
/* .locaCity {
  display: flex;
  justify-content: space-around;
} */
.locaCity {
  .van-cell {
    border-bottom: 1px solid #ccc;
    .van-cell__value {
      font-size: 10px;
      flex: 2;
    }
  }
  .city {
    .van-cell {
      color: blue;
    }
  }
}
.hotCity {
  .hot-title {
    margin-top: 10px;
    background-color: #fff;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    border-top: 1px solid #ccc;
  }
  /deep/.van-grid-item {
    // height: 40px;
    .van-grid-item__text {
      color: blue;
    }
  }
}
/deep/.van-grid-item {
  // height: 40px;
  .van-grid-item__content {
    text-align: center;
  }
  .van-grid-item__text {
    width: 55px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.all-city {
  .all-title {
    margin-top: 10px;
    background-color: #fff;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    border-top: 1px solid #ccc;
    span {
      font-size: 12px;
      color: #d3d3d3;
    }
  }
}
</style>